<template>
  <div>
     <pre v-text="html123()">

      </pre>
  </div>
</template>
<script>

function type2tstype(texttype) {
  if (texttype == 'integer') {
    return 'number';
  } else if (texttype == 'text') {
    return 'string';
  }
}

function underlineToCamel(str) {
  return str?.replace(/_([a-z])/g, function (match, group1) {
    return group1.toUpperCase();
  });
}

export default {
  data() {
    return {
      type2tstype,
      underlineToCamel,

    };
  },

  props: {
    columns: { type: [Array] },
    tableName: { type: [String] },
  },
  methods: {
    html123() {
      var colhtml=''
      for (let i = 0; i < this.$props.columns.length; i++) {
             var colitem=this.$props.columns[i]
             colhtml+=`
                 <el-table-column
                        label="${colitem.colkey}" prop="${colitem.colkey}" min-width="120"  align="center">
                        <template slot-scope="scope">
                      <span>{{ scope.row['${underlineToCamel(colitem.colkey)}']}}</span>
                    </template>
                </el-table-column>`
      }






      return `

            <template>
            <section>
            <div style="margin-bottom:5px">
            <el-button  type="primary"  size="mini" @click="()=>triggerModify()">新增</el-button>
</div>
             <el-table
                size="mini"
                  border
                  ref="multipleTable"
                  :data="dataList"
                  v-loading="loading"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @row-click="(row)=>{
                  tableRowClickOnece(row,'multipleTable')
                }">
                    <el-table-column
                       label="" prop="index" min-width="55" type="selection" align="center">
                  </el-table-column>
              ${colhtml}
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
                  <el-popover
                                  placement="top-start"
                                  width="200"
                                  title="操作"
                                  trigger="hover"
                                >
                                  <div>
                                    <el-button type="text" @click="()=>triggerModify(scope.row)">编辑</el-button>
                                    <el-button type="text" @click="()=>triggerDeleteRow(scope.row)">删除</el-button>
                                  </div>
                                  <el-button slot="reference" type="text">操作</el-button>

                                </el-popover>
                            </template>
</el-table-column>

                </el-table>
</section>

              </template>
              <script >
                  import useTable from '@/hooks/useTable';
                  import axios from 'axios';
                  import { formData, formMethod, PageData, uniqWithKey } from '@/utils/formcommon';
              import { openLayer } from '@/utils/layerdialog/layerdialog';
          import { alertConfirm,alertWithPayload } from '@base/utils';

                 export default{
                 data(){
                     const { tableRowClickOnece } = useTable();
                   return {
                     dataList: [],
                   total:0,
                   ...formData,
                   queryParams:{
                    ...PageData,
                   },
                   tableRowClickOnece,
                   };
                 },
                   mounted() {
                     this.getInfoList();
                    },
                 methods:{
                 ...formMethod,
                 async getInfoList(){
                 this.loading=true;
                    var result=await axios.post('/api/${this.$props.tableName}/getlist',{...this.queryParams}).then(res=>res.data);
                    this.dataList=result&&result.data||[];
                        this.total=result&&result.count;
                             this.loading=false;
                 },
                 async  triggerDeleteRow(row){
                       await alertConfirm('确定删除吗？');
                       var result=await axios.get(\`/api/${this.$props.tableName}/delbyid?id=\${row?.id}\`).then(res=>res.data);
                      alertWithPayload(result);
                         if(result?.success){
                           this.getInfoList();
                        }
                 },
                 async triggerModify(row){
                  var result=await openLayer({
                    title:'',
                    data(){
                     return {row};
                    },
                    components:{
                     modify:()=>import('./modify.vue'),
                    },
                  });
                  if(result?.success){
                   this.getInfoList();
                  }
                 },
                 },
               };
              <\/script>`;
    },
  },
};
</script>
